<template>
    <div class="goodsInfoContain">
        <transition
                @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter">
            <div class="boll" v-show="BollFlag" ref="boll"></div>
        </transition>
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <lunbo :LunBoList="goodsLunBoImages" :isfull="false"></lunbo>
                </div>
            </div>
        </div>
        <div class="mui-card center">
            <div class="mui-card-header">{{goodsInfo.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div class="price">
                        <span>市场价:<span class="oldPrice">￥{{goodsInfo.market_price}}</span></span>
                        <span>销售价:<span class="newPrice">￥{{goodsInfo.sell_price}}</span></span>
                    </div>
                    <div class="count">
                        购买数量：
                        <div class="mui-numbox" data-numbox-min='1'>
                            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                            <input id="test" class="mui-input-numbox" type="number" value="1" disabled ref="buyCount"/>
                            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                        </div>
                        <div class="btns">
                            <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
                            <button type="button" class="mui-btn mui-btn-danger" @click="addCart">加入购物车</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mui-card bottom">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号:{{goodsInfo.goods_no}}</p>
                    <p>库存情况:{{goodsInfo.stock_quantity}}</p>
                    <p>上架时间:{{goodsInfo.add_time | DateFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer btns">
                <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" @click="goodIntroduce">图文介绍
                </button>
                <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" @click="goodComment">商品评论</button>
            </div>
        </div>
    </div>
</template>

<script>
    import lunbo from '../publicComponents/lunbo.vue'
    import mui from '../../lib/mui/dist/js/mui.min.js';

    export default {
        data: function () {
            return {
                id: this.$route.params.id,
                goodsLunBoImages: [],
                goodsInfo: {},
                BollFlag: false,
            }
        },
        methods: {
            getGoodsLunBo() {
                this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/' + this.id).then(data => {
                    this.goodsLunBoImages = data.body.message;
                })
            },
            getGoodsInfo() {
                this.$http.get('http://www.liulongbin.top:3005/api/goods/getinfo/' + this.id).then(data => {
                    this.goodsInfo = data.body.message[0];
                })
            },
            goodIntroduce() { //商品详情路由
                this.$router.push('/home/goodsIntroduce/' + this.id);
            },
            goodComment() { //商品评论路由
                this.$router.push('/home/goodsComment/' + this.id);
            },
            addCart() {  //加入购物车
                this.BollFlag = !this.BollFlag;
                const goodsObj = {
                    id:this.id,
                    count:parseInt(this.$refs.buyCount.value),
                    price:this.goodsInfo.sell_price,
                    selected:true
                };
                this.$store.commit('addGoods', goodsObj);
            },
            beforeEnter(el) {
                el.style.transform = 'translate(-50%,-50%)';
            },
            enter(el, done) {
                el.offsetWidth;
                const bollPosition = this.$refs.boll.getBoundingClientRect(); //js原生的方法
                const badge = document.getElementById('badge').getBoundingClientRect();
                const left = badge.left - bollPosition.left;
                const top = badge.top - bollPosition.top;
                el.style.transform = `translate(${left}px,${top}px)`;
                el.style.transition = '.6s cubic-bezier(.4,-0.3,1,.68)';
                done();
            },
            afterEnter() {
                this.BollFlag = false;
            }
        },
        created() {
            this.getGoodsLunBo();
            this.getGoodsInfo();
        },
        mounted() {
            mui('.mui-numbox').numbox();
        },
        components: {
            "lunbo": lunbo
        },
        watch: {
            goodsInfo: function (newValue, oldValue) {
                mui('.mui-numbox').numbox().setOption('max', parseInt(newValue.stock_quantity));
            }
        }
    }

</script>

<style scoped lang="less">
    .goodsInfoContain {
        background-color: rgba(109, 109, 114, 0.1);
        overflow: hidden;

        .center {
            .price {
                display: flex;
                justify-content: space-between;

                .oldPrice {
                    text-decoration: line-through;
                }

                .newPrice {
                    color: #cf2d28;
                    font-size: 16px;
                    font-weight: bold;
                }
            }

            .count {
                margin-top: 5px;

                .mui-numbox {
                    height: 30px;
                }

                .btns {
                    margin-top: 8px;
                }
            }

        }

        .bottom {
            .btns {
                button {
                    width: 48%;
                }
            }
        }

        .boll {
            width: 15px;
            height: 15px;
            background-color: #cf2d28;
            border-radius: 50%;
            position: absolute;
            left: 154px;
            top: 382px;
            z-index: 99;
        }
    }
</style>
